<template>
  <view class="article-detail-container">
    <view class="article-title">{{articleInfo.articleTitle}}</view>
    <view class="article-read-count">39230人看过</view>
    <view class="article-tags">
      <view class="tag" v-for="(keyword, index) in articleInfo.keywordArray" :key="index">#{{keyword}}</view>
      
    </view>
    <view class="article-content">
      <view v-html="articleInfo.articleContent"> </view>
    </view>

   <!-- <view class="article-feedback">
          <view class="article-feedback-item">
              <uv-button
                  text="无用"
                  size="normal"
                  icon="map"
                  plain
                  type="warning"
              ></uv-button>
    </view>
          <view class="article-feedback-item">
              <uv-button
                  text="有用"
                  size="normal"
                  icon="map"
                  plain
                  type="warning"
                  iconColor="#D4D6DD"
              ></uv-button>
    </view>
    </view>

    <view class="article-vip">
      <view class="article-vip-item">
          <uv-button
                      text="开通VIP观看全文"
                      size="large"
                      type="primary"
          ></uv-button>
      </view>
    </view> -->

  </view>

	<!-- <uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="15k" icon="thumb-up" dot></uv-tabbar-item>
		<uv-tabbar-item text="13k" icon="thumb-down" ></uv-tabbar-item>
		<uv-tabbar-item text="210k" icon="star"></uv-tabbar-item>
		<uv-tabbar-item text="210k" icon="chat"></uv-tabbar-item>
		<uv-tabbar-item text="分享" icon="share"></uv-tabbar-item>
	</uv-tabbar -->


  <TmpArticleFooter
    :articleCode="articleInfo.articleCode" 
    :sourceType="sourceType"
    :feedbackStatus="feedbackStatus"
  />

</template>
  
  <script>
  import TmpArticleFooter from '@/components/common/tmp-article-footer.vue'
  import TmpModal from '@/components/common/tmp-modal.vue'
  import request from '@/common/tools/tools-request'

  export default {
    name: 'ArticleDetail',
    components: { TmpArticleFooter, TmpModal },
    data() {
			return {
        
				articleCode: '', // 用于存储url传递的articleCode参数
				value: 0,
        articleInfo: {},
        sourceType: 'course',
        feedbackStatus: {
            like : false,
            collect : false,
            useful : false,
            useless : false
        }

			}
		},
    methods: {
      getArticleDetail(articleCode) {
        request.post({
          url: '/api/article/detail',
          data: { articleCode }
        }).then(res => {
          if (res && res.data) {
            // 处理文章详情数据
            console.log('文章详情:', res.data)
            this.articleInfo = res.data;
            this.feedbackStatus = res.data.feedbackStatus
          }
        }).catch(err => {
          console.error('获取文章详情失败:', err)
        })
      }
    },
    onLoad(options) {
      if (options.articleCode) {
        this.getArticleDetail(options.articleCode)
      }
    }
  }
  </script>
  
  <style scoped>

  .article-detail-container {
/*    background: #fafbfc; */
    min-height: 70vh;
    padding: 32rpx 0 0rpx 0;
  }

  .article-title {
    font-size: 38rpx;
    font-weight: bold;
    color: #222;
    margin: 18rpx 32rpx 18rpx 32rpx;
    line-height: 1.4;
  }

  .article-read-count {
    color: #bbb;
    font-size: 26rpx;
    padding: 15rpx 0px 15rpx 40rpx;
  }
  .article-tags {
    display: flex;
    gap: 18rpx;
    margin: 20rpx 32rpx 20rpx 32rpx;
  }
  .tag {
    background: #f6f7fa;
    color: #888;
    font-size: 26rpx;
    border-radius: 32rpx;
    padding: 8rpx 28rpx;
  }
  .article-content {
    background: #fff;
    border-radius: 18rpx;
    margin: 0 24rpx 0rpx 24rpx;
    padding: 0rpx 28rpx 0rpx 28rpx;
    color: #222;
    font-size: 30rpx;
    line-height: 1.9;

    /*background-color: #f8f9fe;*/
  
  }
  .content-block {
    margin: 32rpx 0 0 0;
  }
  .content-line {
    margin: 12rpx 0 0 0;
  }

  .evaluate-btn {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18rpx;
    border: 2rpx solid #eee;
    padding: 16rpx 48rpx;
    font-size: 28rpx;
    color: #888;
    gap: 12rpx;
  }
  .evaluate-btn.active {
    border-color: #3c9cff;
    color: #3c9cff;
    font-weight: 500;
  }
  .article-bottom-bar {

  }
  .bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #222;
    gap: 8rpx;
  }



  </style>
  